<script setup lang="ts">
  import Pagination from '@/components/Pagination/index.vue'
  import { onMounted, ref, watch } from 'vue'
  import {
    useGetTemplateList,
    useDelTemplateById,
    useSetTemplateFromBrowserLocal,
  } from '../hooks/useTemplateList'
  import routeComponentName from '@/config/route-component-name'
  import { useRoute, useRouter } from 'vue-router'
  import { CustomFormTemplate } from '../hooks/types'
  import { RefreshRight } from '@element-plus/icons-vue'

  const { list, listTotal, getListParam, getListLoading, getList, resetGetListParam } =
    useGetTemplateList()

  defineOptions({
    name: routeComponentName.order.customTemplates,
  })

  // 激活路由对象
  const route = useRoute()

  // 全局路由对象
  const router = useRouter()

  // 分页组件实例
  const paginationInstance = ref<InstanceType<typeof Pagination> | null>(null)

  /**
   * 添加模板点击事件
   */
  const onAddTemplateClick = () => {
    router.push({ path: '/order/custom/form/create' })
  }

  /**
   * 获取列表
   */
  const _getList = () => {
    if (paginationInstance.value) {
      getListParam.value.limit = paginationInstance.value.size
      getListParam.value.page = paginationInstance.value.current
      getList()
    }
  }

  /**
   * 重置事件
   */
  const onReset = () => {
    resetGetListParam()
    getList()
  }

  /**
   * 模板删除事件
   * @param {CustomFormTemplate} template - 模板对象
   */
  const handleTemplateDel = (template: CustomFormTemplate) => {
    if (template.id) {
      useDelTemplateById(template.id)
      _getList()
    }
  }

  /**
   * 模板编辑事件
   * @param {CustomFormTemplate} template - 模板对象
   */
  const handleTemplateEdit = (template: CustomFormTemplate) => {
    if (template.id) {
      router.push({ path: `/order/custom/form/update/${template.id}` })
    }
  }

  /**
   * 创建工单点击事件
   * @param {CustomFormTemplate} template - 模板对象
   */
  const handleCreateOrderClick = (template: CustomFormTemplate) => {
    if (template.id) {
      router.push({ path: `/order/custom/initiate/process/${template.id}` })
    }
  }

  const handleDataManagerClick = (template: CustomFormTemplate) => {
    if (template.id) {
      router.push({ path: `/order/custom/data/manager/${template.id}` })
    }
  }

  const handleEditProcessClick = (template: CustomFormTemplate) => {
    if (template.id) {
      router.push({ path: `/order/custom/process/update/${template.id}` })
    }
  }

  watch(
    () => route.name,
    () => {
      if (route.query && Number(route.query.isUpdate) === 1) {
        _getList()
      }
    },
  )

  onMounted(() => {
    useSetTemplateFromBrowserLocal()
    _getList()
  })
</script>

<template>
  <div v-loading="getListLoading" class="order-custom-templates">
    <div class="container">
      <header class="header">
        <div class="btn-group">
          <h-plain-button @click="onAddTemplateClick">新建模板</h-plain-button>
        </div>
        <div class="search">
          <el-input
            v-model="getListParam.keyword"
            placeholder="请输入关键字"
            clearable
            class="keyword"
            @clear="_getList"
          />
          <h-button type="primary" @click="_getList">
            <el-icon>
              <Search></Search>
            </el-icon>
            搜索
          </h-button>
          <h-button @click="onReset">
            <el-icon>
              <RefreshRight />
            </el-icon>
            重置
          </h-button>
        </div>
      </header>
      <main class="main">
        <el-table :border="true" :data="list" height="100%">
          <!-- 序号 -->
          <el-table-column label="序号" type="index" width="50" :align="'center'" fixed="left" />

          <!-- 模板名称 -->
          <el-table-column label="模板名称" min-width="140" prop="name" />

          <!-- 创建时间 -->
          <el-table-column label="创建时间" width="160" prop="createTime" />

          <!-- 更新时间 -->
          <el-table-column label="更新时间" width="160" prop="updateTime" />

          <!-- 状态 -->
          <el-table-column label="状态" width="70" :align="'center'">
            <template #default="{ row }">
              <h-status v-if="row.status">启用</h-status>
              <h-status v-else type="info">禁用</h-status>
            </template>
          </el-table-column>

          <!-- 操作 -->
          <el-table-column label="操作" width="320" fixed="right">
            <template #default="{ row }">
              <h-space>
                <h-link @click="handleTemplateEdit(row)">编辑模板</h-link>
                <h-link @click="handleDataManagerClick(row)">数据管理</h-link>
                <h-link @click="handleEditProcessClick(row)">编辑流程</h-link>
                <h-link @click="handleCreateOrderClick(row)">创建工单</h-link>
                <h-link type="error" @click="handleTemplateDel(row)">删除</h-link>
              </h-space>
            </template>
          </el-table-column>
        </el-table>
      </main>
      <footer class="footer">
        <pagination
          ref="paginationInstance"
          :list_total="listTotal"
          @current-chage="_getList"
          @size-change="_getList"
        />
      </footer>
    </div>
  </div>
</template>

<style scoped lang="scss">
  .order-custom-templates {
    padding: 12px;
    box-sizing: border-box;
    width: 100%;
    height: calc(100vh - 92px);

    .container {
      background-color: #fff;
      box-sizing: border-box;
      width: 100%;
      height: 100%;
      padding: 12px;
      display: flex;
      flex-direction: column;
      row-gap: 12px;

      .header {
        display: flex;
        justify-content: space-between;

        .search {
          display: flex;
          column-gap: 5px;

          .keyword {
            width: 160px;
          }
        }
      }

      .footer {
        display: flex;
        justify-content: flex-end;
      }
    }
  }
</style>
